<template>
	<view class="container">
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-30">
				<div style="width: 50rpx;height: 50rpx;" @click="navback" class="f f-a-c f-j-c">
					<image src="/static/zuo.png" class="zuoImg" mode=""></image>
				</div>
				<image @click="goPersHome(obj)" :src="obj.user.avatar" class="avar m-r-10" mode="aspectFill"></image>
				<view @click="goPersHome(obj)" class="topName">
					{{obj.user.nickname}}
				</view>
				<image @click="goPersHome(obj)" src="/static/richang/icon@2x.png" v-if="obj.user.gender==2" class="sex"
					mode=""></image>
				<image @click="goPersHome(obj)" src="/static/richang/icon_1@2x.png" v-else class="sex" mode=""></image>
				<view v-if="!obj.followed" @click="follow" class="btnGuan f f-a-c">
					<image src="/static/shoop/jia.png" class="icon" mode=""></image> 关注
				</view>
				<view v-else @click="unfollow" class="btnGuan f f-a-c">
					取消关注
				</view>
			</view>
			<!-- <view class="box"> -->
		</view>
		<view class="body ">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<view class="swipt">
					<u-swiper height="1000" :list="obj.images"></u-swiper>
				</view>
				<view class="count">
					{{obj.content}}
				</view>
				<view class="time">
					{{$u.timeFormat(new Date(obj.create_time), 'yyyy-mm-dd')}}
					<text>{{obj.ip_address}}</text>
				</view>
				<view class="xianBox">
					<view class="xian"></view>
				</view>
				<!-- 下面的评论 -->
				<view class="AllComments">
					<view class="QuanBu">
						全部评论({{listPin.length}})
					</view>
					<view v-if="listPin.length==0" class="zanwu f f-d-c f-a-c f-j-c">
						<image src="/static/home/zanwu2.png" class="zanwuImg" mode=""></image>
						<view class="content">
							还没有人来评论，快来抢沙发
						</view>
					</view>
					<!-- 下面的评论列表---------------------------------------------- -->
					<view class="CommentList">
						<view v-for="(item,index) in listPin" :key="index" class="listItem f  f-j-b">
							<view class="useBox">
								<image @click="goPersHome(item)" :src="item.user.avatar||'/static/avat.png'"
									class="useAvat" mode=""></image>
							</view>
							<view class="rightName">
								<view class="topName">
									<!-- 跳转详情 -->
									<view class="nickName">
										{{item.user.nickname}}
									</view>
									<view class="content">
										{{item.content}}
									</view>
									<view class="times">
										{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM')}} <text
											@click="recover(item,1)">回复</text>
									</view>
								</view>
								<!-- 下面的二级回复 -->
								<view v-if="item.replies" class="">
									<view class="" v-if="item.static&&item.replies.length>2">
										<view v-for="(ite,inde) in [item.replies[0],item.replies[1]]" :key="inde"
											class="SecondLevelReply f f-j-b">
											<view class="useBoxs">
												<image @click="goPersHome(ite)" :src="ite.user.avatar" class="useAvats"
													mode="">
												</image>
											</view>
											<view class="topNames">
												<view v-if="ite.users" class="nickNames">
													{{ite.user.nickname}} 回复 {{ite.users[0].nickname}}
												</view>
												<view v-else class="nickNames">
													{{ite.user.nickname}}
												</view>
												<view class="contents">
													{{ite.content}}
												</view>
												<view class="timess">
													{{$u.timeFormat(ite.create_time, 'yyyy-mm-dd hh:MM')}}<text
														@click="recovers(ite,item,2)">回复</text>
												</view>
											</view>
										</view>
									</view>
									<view v-else class="">
										<view v-for="(ite,inde) in item.replies" :key="inde"
											class="SecondLevelReply f f-j-b">
											<view class="useBoxs">
												<image @click="goPersHome(ite)" :src="ite.user.avatar" class="useAvats"
													mode="">
												</image>
											</view>
											<view class="topNames">
												<view v-if="ite.users" class="nickNames">
													{{ite.user.nickname}} 回复 {{ite.users[0].nickname}}
												</view>
												<view v-else class="nickNames">
													{{ite.user.nickname}}
												</view>

												<view class="contents">
													{{ite.content}}
												</view>
												<view class="timess">
													{{$u.timeFormat(ite.create_time, 'yyyy-mm-dd hh:MM')}}<text
														@click="recovers(ite,item,2)">回复</text>
												</view>
											</view>
										</view>
									</view>
									<view v-if="item.static&&item.replies.length>2" class="SecondLevelReply f f-j-b">
										<view class="useBoxs">
										</view>
										<view @click.stop="zhankaiHui(item,index)" class="topNames">
											<view class="Reply">
												展开{{item.replies.length-2}}条回复
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="botbut p-t-15">
			<view class="botBtn f f-a-c f-j-b">
				<input type="text" v-model="textValue" placeholder="说点什么" @confirm="configFn" class="inp" name="" id="">
				<view class="f f-a-c">
					<view class="xin f f-a-c">
						<image src="/static/richang/xin.png" @click="like" v-if="!obj.liked" class="xinImg" mode="">
						</image>
						<image src="/static/richang/Frame@2x.png" @click="detLike" v-else class="xinImg" mode="">
						</image>
						{{obj.likes}}
					</view>
					<view class="xin f f-a-c">
						<image src="/static/richang/shou.png" @click="collect" v-if="!obj.stared" class="xinImg"
							mode=""></image>
						<image src="/static/richang/shou2.png" @click="detCollect" v-else class="xinImg" mode="">
						</image>
						{{obj.stars}}
					</view>
					<view class="xin f f-a-c">
						<image src="/static/richang/xinxi.png" class="xinImg" mode=""></image>
						{{listPin.length}}
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="detils">
				<view class="huifu">
					回复
				</view>
				<textarea name="" class="textal" v-model="huiValue" placeholder="请输入评论" id=""></textarea>
				<view @click="confirmReply" class="comHui">
					确认回复
				</view>
			</view>
		</u-popup>
	</view>
</template>
<!-- qwqqqqqqqqqqqqqq qqweeqwewqqwecqw qweeqwwwqeqweweqqweweqqqweqwecwq qweqwe eqqwe-->
<script>
	export default {
		data() {
			return {
				show: false,
				huiValue: '',
				commentList: ['', ''],
				textValue: '',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				item: {},
				ite: {},
				num: 0,
				obj: {},
				id: 0,
				page: 1,
				total: 0,
				listPin: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initPing()
			this.initObj()
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods: {
			// 取消关注
			async unfollow() {
				let n = await this.$api.unfollow({
					id: this.obj.user.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// 关注
			async follow() {
				let n = await this.$api.follow({
					id: this.obj.user.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// 展开回复
			async zhankaiHui(item, index) {
				// item.static = !item.static
				// this.listPin[index].static = false
				this.listPin = this.listPin.map((ite, inde) => {
					if (inde == index) {
						ite.static = !ite.static
						return ite
					} else {
						return ite
					}
				})
				// console.log(this.listPin, '5555555555555')
				// await this.$nextTick()
			},
			// 回复评论
			async confirmReply() {
				if (this.num == 1) {
					let n = await this.$api.replyList({
						id: this.id,
						op_comment_id: this.item.id,
						reply_user_id: this.item.user.id,
						content: this.huiValue
					})
					this.huiValue = ''
					this.$msg(n.msg)
					if (n.code == 200) {
						this.page = 1
						this.listPin = []
						this.show = false
						setTimeout(() => {
							this.initPing()
						}, 500)
					}
				} else {
					let n = await this.$api.replyList({
						id: this.id,
						op_comment_id: this.item.id,
						reply_user_id: this.ite.user.id,
						content: this.huiValue
					})
					this.huiValue = ''
					this.$msg(n.msg)
					if (n.code == 200) {
						this.page = 1
						this.listPin = []
						this.show = false
						setTimeout(() => {
							this.initPing()
						}, 500)
					}
				}

			},
			// /点击回复
			async recover(item, num) {
				this.show = true
				this.item = item
				this.num = num
			},
			// /点击回复
			async recovers(ite, item, num) {
				this.show = true
				this.item = item
				this.ite = ite
				this.num = num
			},
			onreachBottom() {
				if (this.listPin.length < this.total) {
					this.page++
					this.initPing()
				}
			},
			async initPing() {
				let n = await this.$api.productList({
					page: this.page,
					id: this.id
				})
				this.total = n.data.total
				this.listPin = [...this.listPin, ...n.data.rows]
				this.listPin.forEach(item => {
					if (item.replies.length > 2) {
						item.static = true
					} else {
						item.static = true
					}
				})
			},
			// 回车键
			async configFn(e) {
				console.log(e, '55555555');
				if (e.detail.value.length == 0) return
				let n = await this.$api.replyList({
					id: this.id,
					op_comment_id: '',
					reply_user_id: '',
					content: e.detail.value
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					this.textValue = ''
					setTimeout(() => {
						this.page = 1
						this.listPin = []
						this.initPing()
					}, 500)
				}
			},
			// /点击点赞
			async like() {
				let n = await this.$api.likeDynamic({
					id: this.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// /取消点赞点赞
			async detLike() {
				let n = await this.$api.detDynamic({
					id: this.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// /点击收藏
			async collect() {
				let n = await this.$api.collectDynamic({
					id: this.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// /取消收藏
			async detCollect() {
				let n = await this.$api.detCollectDynamic({
					id: this.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			async initObj() {
				let n = await this.$api.momentsDetils({
					id: this.id
				})
				this.obj = n.data
				this.obj.images = this.obj.images.split(',')
			},
			// 跳转到个人主页
			goPersHome(item) {
				uni.navigateTo({
					url: '/pages/Meowmate/PersonalHomePage?id=' + item.user.id
				})
			},
			navback() {
				// uni.navigateBack()
				uni.switchTab({
					url: '/pages/Meowmate/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detils {
		padding: 20rpx;

		.huifu {
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
			margin-top: 20rpx;
		}

		.textal {
			width: 600rpx;
			height: 200rpx;
		}

		.comHui {
			width: 90%;
			height: 86rpx;
			line-height: 85rpx;
			text-align: center;
			border-radius: 43rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			background-color: #977961;
			margin: 0 auto;
		}
	}

	.SecondLevelReply {
		margin-top: 20rpx;

		.Reply {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: $brown;
		}

		.useBoxs {
			width: 52rpx;
			height: 54rpx;

			.useAvats {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		.topNames {
			width: 87%;

			.nickNames {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
				margin-bottom: 10rpx;
			}

			.contents {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hei;
				margin-bottom: 10rpx;
			}

			.timess {
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				text {
					margin-left: 15rpx;
				}
			}
		}

	}

	.CommentList {
		margin-top: 25rpx;

		.listItem {
			margin-bottom: 35rpx;

			.useBox {
				width: 72rpx;
				height: 72rpx;

				.useAvat {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					object-fit: cover;
				}
			}

			.rightName {
				width: 85%;

				.nickName {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;
					margin-bottom: 10rpx;
				}

				.content {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hei;
					margin-bottom: 10rpx;
				}

				.times {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;

					text {
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.body {
		height: 81vh;
		overflow-y: auto;
	}

	.botbut {
		height: 130rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fffefc;
		border-top: 2rpx solid #f7f6f2;

		.botBtn {
			padding: 0 50rpx;

			.xin {
				margin-left: 25rpx;

				.xinImg {
					width: 38rpx;
					height: 36rpx;
					margin-right: 5rpx;
				}
			}

			.inp {
				width: 382rpx;
				height: 64rpx;
				background: #f7f6f2;
				border-radius: 44rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.AllComments {
		padding: 0 50rpx;
		margin-top: 30rpx;
		padding-bottom: 50rpx;

		.zanwu {
			margin-top: 30rpx;

			.zanwuImg {
				width: 242rpx;
				height: 200rpx;
			}

			.content {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
				margin-top: 15rpx;
			}
		}

		.QuanBu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}
	}

	.xianBox {
		padding: 0 50rpx;

		.xian {
			height: 2rpx;
			width: 100%;
			background-color: #f2efec;
			margin-top: 30rpx;
		}
	}

	.time {
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: LEFT;
		color: $hui;

		text {
			margin-left: 25rpx;
		}
	}

	.count {
		padding: 30rpx 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: LEFT;
		color: $hei;
		line-height: 1.6;
	}

	.zuoImg {
		width: 28rpx;
		height: 28rpx;

	}

	.topName {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: LEFT;
		color: $hei;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}

	.sex {
		width: 20rpx;
		height: 20rpx;
		margin-right: 25rpx;
	}

	.avar {
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}

	.btnGuan {
		width: 112rpx;
		height: 50rpx;
		background: $brown;
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: LEFT;
		color: #fffefc;

		.icon {
			width: 20rpx;
			height: 20rpx;
			margin-right: 7rpx;
		}
	}

	.container {
		height: 100vh;
		width: 100%;
		padding-top: 180rpx;
		padding-bottom: 150rpx;
		overflow-y: auto;
		background: #fffefc;
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		background: #fffefc;
		z-index: 99;
	}

	.topHeacd {
		height: 70rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;
		// background-color: pink;

		.avar {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}

		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}
	}
</style>